import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/border-background'
    },
    {
      path: '/',
      name: 'index',
      component: (resolve) => require(['./views/layout.vue'], resolve),
      children: [
        {
          path: '/border-background',
          name: '边框与背景',
          component: (resolve) => require(['./views/css-magic/border-background.vue'], resolve),
          meta: {
            gName: 'css揭秘'
          }
        },
        {
          path: '/layout-view',
          name: '布局与结构',
          component: (resolve) => require(['./views/css-magic/layout-view.vue'], resolve),
          meta: {
            gName: 'css揭秘'
          }
        },
        {
          path: '/special-effect-view',
          name: '视觉效果',
          component: (resolve) => require(['./views/css-magic/special-effect-view.vue'], resolve),
          meta: {
            gName: 'css揭秘'
          }
        },
        {
          path: '/animation-view',
          name: '过渡与动画',
          component: (resolve) => require(['./views/css-magic/animation-view.vue'], resolve),
          meta: {
            gName: 'css揭秘'
          }
        },
        // ----------
        {
          path: '/style-process-view',
          name: '纯样式滚动进度条',
          component: (resolve) => require(['./views/css-trick/style-process-view.vue'], resolve),
          meta: {
            gName: 'css经典案例'
          }
        },
        {
          path: '/case-a-view',
          name: '经典案例集合1',
          component: (resolve) => require(['./views/css-trick/case-a-view.vue'], resolve),
          meta: {
            gName: 'css经典案例'
          }
        },
        // -------------------
        {
          path: '/anime-js-view',
          name: 'anime库使用',
          component: (resolve) => require(['./views/other/anime-js-view.vue'], resolve),
          meta: {
            gName: '其他'
          }
        }
      ]
    }
  ]
})
